<template>
  <div class="wrap">
    <el-form label-width="68px">
      <el-form-item label="选择年月" prop="modelName">
        <el-date-picker
          v-model="value"
          :picker-options="pickerOptions"
          type="month"
          placeholder="选择月"
        ></el-date-picker>
      </el-form-item>
    </el-form>

    <el-calendar v-model="value" style="width: 820px">
      <template slot="dateCell" slot-scope="{date, data}">
        <div :class="{ selected : isSelected(date, data) }" @click="handleCellClick(date, data)">
          <div class="solar">{{ data.day.split('-')[2] }}</div>
          <div
            class="lunar"
            :class="{ festival : isFestival(date, data) }"
          >{{ solarToLunar(date, data) }}</div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>
<script>
import calendar from "js-calendar-converter";
export default {
  data() {
    return {
      value2: "",
      // 设置value，会自动显示value对应月份，可以设置为selectedDates的第一个日期
      value: "",
      // 根据selectedDates设置选中日期
      selectedDates: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      }
    };
  },
  mounted() {
    this.getDate();
  },
  methods: {
    handleCellClick(date, data) {
      console.log(date);
      console.log(data, "datadata");
      //   console.log("Clicked on: ", date.getDate());
      // 你可以在这里编写你的逻辑
    },
    getDate() {
      let date = new Date();
      let theYear = date.getFullYear(); //获取完整的年份(4位)
      let theMonth = date.getMonth() + 1; //获取当前月份(1-12,1代表1月)
      theMonth = theMonth >= 10 ? theMonth : "0" + theMonth;
      let theDay = date.getDate(); //获取当前日(1-31)
      theDay = theDay >= 10 ? theDay : "0" + theDay;
      this.value = theYear + "-" + theMonth + "-" + theDay;
    },

    // 是否选中日期
    isSelected: function(slotDate, slotData) {
      return this.selectedDates.includes(slotData.day);
    },
    // 是否节假日
    isFestival(slotDate, slotData) {
      let solarDayArr = slotData.day.split("-");
      let lunarDay = calendar.solar2lunar(
        solarDayArr[0],
        solarDayArr[1],
        solarDayArr[2]
      );

      // 公历节日\农历节日\农历节气
      let festAndTerm = [];
      festAndTerm.push(
        lunarDay.festival == null ? "" : " " + lunarDay.festival
      );
      festAndTerm.push(
        lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
      );
      festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
      festAndTerm = festAndTerm.join("");

      return festAndTerm != "";
    },
    // 公历转农历
    solarToLunar(slotDate, slotData) {
      let solarDayArr = slotData.day.split("-");
      let lunarDay = calendar.solar2lunar(
        solarDayArr[0],
        solarDayArr[1],
        solarDayArr[2]
      );

      // 农历日期
      let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn;

      // 公历节日\农历节日\农历节气
      let festAndTerm = [];
      festAndTerm.push(
        lunarDay.festival == null ? "" : " " + lunarDay.festival
      );
      festAndTerm.push(
        lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
      );
      festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
      festAndTerm = festAndTerm.join("");

      return festAndTerm == "" ? lunarMD : festAndTerm;
    }
  }
};
</script>
<style>
.wrap {
  padding: 30px;
}
.el-calendar__header {
  justify-content: space-around !important;
}
/**隐藏上一月、本月、下一月*/
.el-calendar__button-group {
  /* display: none; */
}
/**月份居中*/
.el-calendar__title {
  /* width: 100%; */
  text-align: center;
}
/**日期div的样式*/
.el-calendar-table tr td:first-child {
  border-left: 0px;
}
.el-calendar-table td {
  min-height: 110px;
  min-width: 110px;
  border-right: 0px;
}
.el-calendar-table td.is-selected {
  background-color: #1890ff !important;
}
.el-calendar-table td.is-selected .lunar {
  color: #fff !important;
}
.el-calendar-table td.is-selected .solar {
  color: #fff !important;
}

.el-calendar-table .el-calendar-day {
  height: 100%;
  padding: 0px;
  text-align: center;
}
.el-calendar-table .el-calendar-day > div {
  height: 104px;
}
/**日期div的样式-公历*/
.el-calendar-table .el-calendar-day > div .solar {
  padding-top: 30px;
}
/**日期div的样式-农历*/
.el-calendar-table .el-calendar-day > div .lunar {
  padding-top: 10px;
}
/**日期div的样式-选中*/
.el-calendar-table .el-calendar-day > div.selected {
  background-color: #fef2f2;
  border: 3px solid #fb0;
  border-radius: 20px;
}

/**本月周末设置为红色*/
.el-calendar-table .current:nth-last-child(-n + 2) .solar {
  color: red;
}
/**本月农历设置为灰色*/
.el-calendar-table .current .lunar {
  color: #606266;
}
/**本月农历节日设置为红色*/
.el-calendar-table .current .lunar.festival {
  color: red;
}
/**禁用点击效果*/
/*.el-calendar-table td {*/
/*pointer-events: none;*/
/*}*/
</style>